import './index.scss'
import { useNavigate, useParams } from "react-router-dom"
import { Row, Col, Table, Button, Space, Form, Input, UploadProps, Upload, message, Radio, Select } from 'antd';
import http from '../../../../utils/http';
import type { ColumnsType } from 'antd/lib/table';
import { FC, useState, useEffect } from 'react';
import axios from '../../../../utils/axios'
import { useSelector } from 'react-redux';
const { TextArea } = Input;
const { Option } = Select;
const Maintain2: FC = () => {
  const json = useSelector((state: any) => state.inspectionResult.json)
  const navigate = useNavigate()
  const { id } = useParams()
  const [basic] = Form.useForm()
  const [basic1] = Form.useForm()
  // 取消按钮: 退出当前页面
  const exitPage = () => {
    navigate('/home/fourthly/inspectionResult')
  }
  // 确认按钮: 获取所有表单数据 
  const getAll = () => {
    // console.log(basic.getFieldsValue())
    console.log(basic1.getFieldsValue())
  }
  // 表单数据
  const [data, setData] = useState<DataType[]>([]);
  const getData = (pcId: string) => {
    axios({
      url: `/examine/findReportByMtCode/${pcId}`,
      method: 'get',
    }).then(res => {
      let id = 1
      res.data.data.insReports.map((v: DataType) => v.id = id++)
      setData(res.data.data.insReports)
    })
      .catch(error => console.log(error))
  }
  useEffect(() => {
    if (typeof json == 'string') {
      let _json = JSON.parse(json);
      basic.setFieldsValue(_json)
      getData(_json.tobNumber)
    } else {
      basic.setFieldsValue(json)
      getData(json.tobNumber)
    }
  }, [])
  // 上传文件
  const picture: UploadProps = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };
  // -----表单----
  interface DataType {
    id: number,
    checkouContext: string
    sampleProcedureName: string
    sampleProcedureNumber: string
    checkouStandard: string
    cvalue: string
    cpassnum: string
    cnopassnum: string
    cjudge: string
    cremark: string
  }
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'id',
      align: "center",
      className: 'headerBg'
    },
    {
      title: '检验项目',
      dataIndex: 'checkouContext',
      align: "center",
      className: 'headerBg'
    },
    {
      title: 'AQL',
      dataIndex: 'sampleProcedureName',
      align: "center",
      className: 'headerBg'
    },
    {
      title: '抽样数',
      dataIndex: 'sampleProcedureNumber',
      align: "center",
      className: 'headerBg'
    },
    {
      title: '标准',
      dataIndex: 'checkouStandard',
      align: "center",
      className: 'headerBg'
    },
    {
      title: '实测值',
      dataIndex: 'cvalue',
      align: "center",
      className: 'headerBg'
    },
    {
      title: '合格数',
      dataIndex: 'cpassnum',
      align: "center",
      className: 'headerBg'
    },
    {
      title: '不合格数',
      dataIndex: 'cnopassnum',
      align: "center",
      className: 'headerBg'
    },
    {
      title: '判定',
      dataIndex: 'cjudge',
      align: "center",
      className: 'headerBg'
    },
    {
      title: '附件',
      dataIndex: 'id11',
      align: "center",
      className: 'headerBg'
    },
    {
      title: '备注',
      dataIndex: 'cremark',
      align: "center",
      className: 'headerBg'
    },
  ];

  return <div className='Maintain2'>
    <Form
      name="basic"
      form={basic}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      autoComplete="off"
      layout="inline"
      labelCol={{ span: 8 }}
    >
      <Space size={[120, 10]} wrap>
        <Form.Item label="供应商简称" name="supName">
          <Input size="small" disabled />
        </Form.Item>
        <Form.Item label="送货批次" name="tobNumber">
          <Input size="small" disabled />
        </Form.Item>
        <Form.Item label="送货数量" name="tobCount">
          <Input size="small" disabled />
        </Form.Item>
        <Form.Item label="物料类型" name="materialsName1">
          <Input size="small" disabled />
        </Form.Item>
        <Form.Item labelCol={{ offset: 1 }} label="物料编码" name="materialsCode">
          <Input size="small" disabled />
        </Form.Item>
        <Form.Item labelCol={{ offset: 1 }} label="物料名称" name="materialsName">
          <Input size="small" disabled />
        </Form.Item>
        <Form.Item labelCol={{ offset: 4 }} label="图号" name="username6">
          <Input size="small" disabled />
        </Form.Item>
        <Form.Item labelCol={{ offset: 2 }} label="图纸版本号" name="username7">
          <Input size="small" disabled />
        </Form.Item>
        <Form.Item labelCol={{ offset: 1 }} label="检验规范" name="username7">
          <Button type="link" >1111</Button>
        </Form.Item>
        <br />
        <Form.Item labelCol={{ offset: 4 }} label="检验员" name="userName">
          <Input size="small" disabled />
        </Form.Item>
        <br /><br /><br /><br /><br /><br />
        <Form.Item label="检验员结论" name="comJyy">
          <Input size="small" disabled />
        </Form.Item>
        <Form.Item label="缺陷类别" name="username10">
          <Input size="small" disabled />
        </Form.Item>
        <Form.Item labelCol={{ offset: 1 }} label="厂家报告">
          <Upload {...picture}>
            <Button>上传文件</Button>
          </Upload>
        </Form.Item>
        <br /><br /><br />
        <Form.Item label="不良描述" name="username12">
          <TextArea rows={4} placeholder="请输入描述" />
        </Form.Item>
        <Form.Item labelCol={{ offset: 3 }} label="备注" name="username13">
          <TextArea rows={4} placeholder="备注" />
        </Form.Item>
      </Space>
    </Form>
    <div className="tit">检验报告</div>
    <hr />
    <Table pagination={false} size="small" rowKey={(record) => record.id} columns={columns} dataSource={data} bordered />
    <div className="tit">审核</div>
    <hr />
    <Form
      name="basic1"
      form={basic1}
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}

      autoComplete="off"
    >
      <Row justify='space-between'>
        <Col>
          <Form.Item label="IQC主管结论" name="shenghe">
            <Input />
          </Form.Item>
          <Form.Item label="发送邮件组" name="shenghe">
            <Input />
          </Form.Item>
        </Col>
        <Col>
          <Form.Item label="不合格对产品的影响" name="yingxiang">
            <TextArea rows={4} placeholder="请输入描述" />
          </Form.Item>
        </Col>
        <Col>
          <Form.Item label="不合格对产品的影响" name="yijian">
            <TextArea rows={4} placeholder="请输入描述" />
          </Form.Item>
        </Col>
      </Row>
      <div className="tit">主管审核</div>
      <hr />
      <Row justify='space-between'>
        <Col>
          <Form.Item label="综合结论" name="jielun">
            <Radio.Group>
              <Radio value="让步处理">让步处理</Radio>
              <Radio value="退货">退货</Radio>
              <Radio value="评审">评审</Radio>
            </Radio.Group>
          </Form.Item>
        </Col>
        <Col>
          <Form.Item label="驳回原因" name="bohui">
            <TextArea rows={4} placeholder="请输入描述" />
          </Form.Item>
        </Col>
      </Row>
    </Form>

    <Row justify="center">
      <Col span={2}>
        <Button onClick={exitPage} type='primary'>取消</Button >
      </Col>
      <Col span={2}>
        <Button onClick={getAll} type='primary'>确定</Button>
      </Col>
    </Row>
  </div>
}

export default Maintain2